<!DOCTYPE html>
<html lang="en">

<head>
    <title>抽屉组件</title>
    <!--=include _head.html  -->
    <style>
        .fa-dropdown {
            margin-left: 100px !important;
        }
    </style>
</head>

<body class=" layui-fluid">
    <div class="fa-layout">
        <div class="layui-card">
            <div class="layui-card-header">抽屉</div>
            <div class="layui-card-body" id="drawer">
                <button data-offset="l" class="layui-btn layui-btn-primary">左侧抽屉</button>
                <button data-offset="r" class="layui-btn layui-btn-primary">右侧抽屉</button>
                <button data-offset="t" class="layui-btn layui-btn-primary">上侧抽屉</button>
                <button data-offset="b" class="layui-btn layui-btn-primary">下侧抽屉</button>
            </div>
        </div>
        <div class="layui-card">
            <div class="layui-card-header">下拉菜单</div>
            <div class="layui-card-body fa-align-center" id="dropdown">
                <button data-offset="l" class="layui-btn layui-btn-primary fa-dropdown" data-dp-id="dp1">左侧</button>
                <button data-offset="r" class="layui-btn layui-btn-primary fa-dropdown" data-dp-id="dp2">右侧</button>
                <button data-offset="t" class="layui-btn layui-btn-primary fa-dropdown" data-dp-id="dp3">上侧</button>
                <button data-offset="b" class="layui-btn layui-btn-primary fa-dropdown" data-dp-id="dp4">下侧</button>
            </div>
        </div>
    </div>
</body>
<script>
    fa.use(['fa_util', 'layer', 'fa_drawer', 'fa_dropdown'], function (
        util = layui.fa_util,
        layer = layui.layer,
        drawer = layui.fa_drawer,
        dropdown = layui.fa_dropdown
    ) {
        $('#drawer .layui-btn').on('click', function () {
            var othis = $(this), offset = othis.data('offset');
            drawer.render({
                title: "标题",
                offset: offset,
                content: "<center>我是内容</center>",
                width: 200,
                height: 200,
            });
        });
        let opt = {
            offset: "r",
            eventHandler: function (e) { },
            menus: [
                { icon: 'layui-icon layui-icon-mike', event: 'mike', title: '麦克风' },
                { icon: 'layui-icon layui-icon-service', event: 'service', title: '客服' }
            ]
        };
        let opts = {}
        $("#dropdown .fa-dropdown").each((x, y) => {
            let o = $(y);
            opts[o.data('dp-id')] = util.extend({}, opt, { offset: o.data('offset') })
        });
        dropdown.render(opts);
    })
</script>

</html>